import { Component } from "react";
import { Layout, Col, Row, Button, Form, Input, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
// 从Layout对象里面，导出布局的子组件
const { Header, Footer, Sider, Content } = Layout
export default class Login extends Component {
  onFinish() { }
  onFinishFailed() { }
  render() {
    return (
      <Layout className="h-100">
        <Content className="h-100">
          {/* Row里面可以是Flex布局 */}
          <Row justify='center' align="middle" className="h-100">
            <Col span={8} xs={24} md={12} lg={8}>
              <Form
                name="basic"
                labelCol={{
                  span: 8,
                }}
                wrapperCol={{
                  span: 16,
                }}
                initialValues={{
                  remember: true,
                }}
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label={<>Username <UserOutlined /></>}
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your username!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label={<>Password <LockOutlined /></>}
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your password!',
                    },
                  ]}
                >
                  <Input.Password />
                </Form.Item>

                <Form.Item
                  name="remember"
                  valuePropName="checked"

                  // 当没有Label时，配置列的参数，offset：偏移值8列，span: 组件列的宽度为16列
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                >
                  <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <Form.Item
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                >
                  <Button type="primary" htmlType="submit" style={{ width: '100%' }} icon={<UserOutlined />}>
                    Submit
                  </Button>
                </Form.Item>
              </Form>
            </Col>
          </Row>
        </Content>

      </Layout>
    );
  }
}